<template>
  <div class="daohanganniu">
    <div
      v-for="(item,index) in tadta"
      :key="index"
      :class="[{active:item.isActive},'dhAnNiu']"
      @mousemove="mousemove(index)"
      @mouseout="mouseout(index)"
      @click="route(item,index)"
    >
      <div class="img">
        <img :src="require('../assets/' + item.srcs)" alt />
      </div>
      <div class="text">
        <span>{{item.secondrankname}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Utils from "../config/util.js";
export default {
  name: "daoHangAnNiu",
  data() {
    return {
      tadta: [],
      index: "",
      indexs: "",
      isclick: false,
      rankList: [],
      item: "",
      id: "",
      istrue: false
    };
  },
  created() {
    setTimeout(() => {
      this.updataByStore();
    }, 500);
  },
  mounted() {
    var that = this;
    Utils.$on("updataBystore", function(msg) {
      that.updataByStore();
    });
  },
  methods: {
    //数据实时加载
    updataByStore() {
      //一级模块标识
      this.item = this.$route.query.index;
      if (this.item == null) {
        this.item = 1;
      }
      this.rankList = JSON.parse(localStorage.getItem("rankList"));
      this.indexs = localStorage.getItem("defActive");
      if (this.indexs == null) {
        this.indexs = 1;
      }
        // for (var i = 0; i < this.rankList.length; i++) {
        //   if (i == this.indexs-1) {
        //     var list = this.rankList[i].tworank;
        //   }
        // }
        var list = this.rankList[this.indexs - 1].tworank;
        var arr = [];
        for (var i = 0; i < list.length; i++) {
          var obj = {
            path1: list[i].pic,
            path2: list[i].pic2,
            srcs: list[i].pic,
            isActive: false,
            secondrankname: list[i].name,
            url: list[i].url,
            secondrankno: i+1
          };
          arr.push(obj);
        }
       // console.log(this.item,arr);
      this.tadta = arr;
      if (this.$route.query.index2) {
        this.id = this.$route.query.index2;
      } else {
        this.id = 0;
      }
      this.tadta[this.id].srcs = this.tadta[this.id].path2;
      this.tadta[this.id].isActive = true;
    },
    // 鼠标移入
    mousemove(index) {
      this.tadta[index].srcs = this.tadta[index].path2;
      if (index == this.id) {
        this.istrue = true;
      } else {
        this.istrue = false;
      }
    },
    // 鼠标移出
    mouseout(index) {
      if (this.istrue && !this.isclick) {
        this.tadta[index].srcs = this.tadta[index].path2;
      } else if (this.index == index && this.isclick) {
        this.tadta[index].srcs = this.tadta[index].path2;
      } else {
        this.tadta[index].srcs = this.tadta[index].path1;
      }
    },
    // 点击
    route(item, index) {
      //console.log(item,this.tadta.url,item.url, index)
      localStorage.setItem("ceoTab", '0');
      var that = this;
      for (var i = 0; i < this.tadta.length; i++) {
        this.tadta[i].isActive = false;
        this.tadta[i].srcs = this.tadta[i].path1;
      }
      this.index = index;
      this.isclick = true;
      this.istrue = false;
      this.tadta[index].isActive = true;
      this.tadta[index].srcs = this.tadta[index].path2;
      //console.log(this.item,'000');
        that.$router.push({
              path: item.url,
              query:{index:this.item,index2: index}
            });
      // 我的任务
      // if (this.item == 1 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "/PersonalCenterHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // // 工作日志
      // if (this.item == 1 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./WorkLog",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // // 出勤
      // if (this.item == 1 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./Attendance",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // // 公告
      // if (this.item == 1 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./Announcement",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // // 报销
      // if (this.item == 1 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./Reimbursement",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // // 申请
      // if (this.item == 1 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./Application",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // // 通讯录
      // if (this.item == 1 && item.secondrankno == 7) {
      //   that.$router.push({
      //     path: "./AddressBook",
      //     query: { index: this.item, index2: 6 }
      //   });
      // }
      // // 文档下载(文档管理)
      // if (this.item == 1 && item.secondrankno == 8) {
      //   that.$router.push({
      //     path: "./Employeehandbook",
      //     query: { index: this.item, index2: 7 }
      //   });
      // }
      // // 文档下载(申请招聘)
      // if (this.item == 1 && item.secondrankno == 9) {
      //   that.$router.push({
      //     path: "./Documentdownload",
      //     query: { index: this.item, index2: 8 }
      //   });
      // }
      // // 总裁-首页
      // if (this.item == 2 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./ManagerAuditHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // // 审核管理
      // if (this.item == 2 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./AuditManagement",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // // 工作流
      // if (this.item == 2 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./Workflow",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // // 客户信息
      // if (this.item == 2 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./CustomerInformation",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // // 权限设置
      // if (this.item == 2 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./PermissionSet",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // // 财务-首页
      // if (this.item == 3 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./FinanceHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 3 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./AccountManagement",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 3 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./Invoicemanagement",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 3 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./Contractmanagement",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 3 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./CostManagement",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 3 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./htManagement",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // if (this.item == 3 && item.secondrankno == 7) {
      //   that.$router.push({
      //     path: "./CbManagement",
      //     query: { index: this.item, index2: 6 }
      //   });
      // }
      // // 行政-首页
      // if (this.item == 4 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./AdministrationHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 4 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./MaterialManagement",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 4 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./VehicleManagement",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 4 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./Routinemaintenance",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 4 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./Receptionmanagement",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 4 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./Purchasingmanage",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // if (this.item == 4 && item.secondrankno == 7) {
      //   that.$router.push({
      //     path: "./CheLiangdk",
      //     query: { index: this.item, index2: 6 }
      //   });
      // }
      // // // 员工手册
      // // if (this.item == 4 && item.secondrankno == 8) {
      // //   that.$router.push({
      // //     path: "./Employeehandbooks",
      // //     query: { index: this.item, index2: 7 }
      // //   });
      // // }
      // // 文档上传
      // if (this.item == 4 && item.secondrankno == 8) {
      //   that.$router.push({
      //     path: "./Documentdownloads",
      //     query: { index: this.item, index2: 7 }
      //   });
      // }
      // // 人事-首页-考勤
      // if (this.item == 5 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./PersonnelHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 5 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./CompensationManagement",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 5 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./Recruitmentmanagement",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 5 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./TrainingManagement",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 5 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./EmployeeInformation",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 5 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./EmployeeLiZhi",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // // 销售-首页
      // if (this.item == 6 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./SalesHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 6 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./OrderManagement",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 6 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./SalesPlan",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 6 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./CustomerManage",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 6 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./Aftersalesmanage",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 6 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./pickuptruck",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // // 采购-首页
      // if (this.item == 7 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./PurchaseHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 7 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./Purchasingmanaged",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 7 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./Purchasingplan",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 7 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./Suppliermanagement",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 7 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./Safetystock",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 7 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./SalePlan",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // if (this.item == 7 && item.secondrankno == 7) {
      //   that.$router.push({
      //     path: "./WaiJiaGong",
      //     query: { index: this.item, index2: 6 }
      //   });
      // }
      // // 仓库-首页
      // if (this.item == 8 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./WarehouseHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./LogisticsList",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./CollectionScheme",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./Rawmaterialstore",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./Semifinishedwh",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./Finishedstore",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 7) {
      //   that.$router.push({
      //     path: "./ScrapYard",
      //     query: { index: this.item, index2: 6 }
      //   });
      // }
      // if (this.item == 8 && item.secondrankno == 8) {
      //   that.$router.push({
      //     path: "./DeliveryManagement",
      //     query: { index: this.item, index2: 7 }
      //   });
      // }
      // // 生产-首页
      // if (this.item == 9 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./ProductionHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 9 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./Productionmanage",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 9 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./ProductionPlan",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 9 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./ProductionStaff",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 9 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./Payrollmanagement",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // if (this.item == 9 && item.secondrankno == 6) {
      //   that.$router.push({
      //     path: "./XsPlan",
      //     query: { index: this.item, index2: 5 }
      //   });
      // }
      // if (this.item == 9 && item.secondrankno == 7) {
      //   that.$router.push({
      //     path: "./FwaiJiaGong",
      //     query: { index: this.item, index2: 6 }
      //   });
      // }
      // // 产品-首页
      // if (this.item == 10 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./ProductHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 10 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./MaterialManagementd",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 10 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./OrderReview",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // if (this.item == 10 && item.secondrankno == 4) {
      //   that.$router.push({
      //     path: "./CpsalesPlan",
      //     query: { index: this.item, index2: 3 }
      //   });
      // }
      // if (this.item == 10 && item.secondrankno == 5) {
      //   that.$router.push({
      //     path: "./BOOM",
      //     query: { index: this.item, index2: 4 }
      //   });
      // }
      // // 设备-首页
      // if (this.item == 11 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./EquipmentHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 11 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./MoJuManage",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
      // if (this.item == 11 && item.secondrankno == 3) {
      //   that.$router.push({
      //     path: "./ZhiJian",
      //     query: { index: this.item, index2: 2 }
      //   });
      // }
      // // 品质-首页
      // if (this.item == 12 && item.secondrankno == 1) {
      //   that.$router.push({
      //     path: "./QualityHmPg",
      //     query: { index: this.item }
      //   });
      // }
      // if (this.item == 12 && item.secondrankno == 2) {
      //   that.$router.push({
      //     path: "./InspectionStandard",
      //     query: { index: this.item, index2: 1 }
      //   });
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.dhAnNiu {
  color: $deepgrey;
  width: 91px;
  height: 81px;
  border-radius: 5px;
  margin: 0 auto;
  padding-top: 10px;
  display: inline-block;
  margin-right: 20px;
  background-color: $DaohangBg_color;
  cursor: pointer;
}
.dhAnNiu:hover {
  border-bottom: 5px solid $DaohangDj_color;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  color: $DaohangDj_color;
}
.active {
  border-bottom: 5px solid $DaohangDj_color;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  color: $DaohangDj_color;
}
.img {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  margin-bottom: 5px;
}
.img img {
  width: 44px;
  height: 44px;
}
.text {
  text-align: center;
}
.text span {
  font-size: 13px;
}
.daohanganniu {
  // width: 100%;
  height: 105px;
  padding-top: 15px;
  padding-left: 20px;
  background-color: $white;
  margin-bottom: 10px;
}
</style>
